
<div ng-controller="CategoryListCtrl as skuCatListCtrl">
    <div class="row">
        <div class="col-md-4">
            <div class="box box-primary">
                <!-- form start -->
                <form>
                    <div class="box-body">
                        <div class="form-group">
                            <label for="category-new-ug-name" class="control-label">分类名称</label>
                            <div class="input-group input-group-sm">
                                <input type="text"
                                       ng-focus="error.name=''"
                                       class="form-control"
                                       ng-model="category.name"
                                       id="category-new-ug-name"
                                       placeholder="分类名称">
                                <span class="input-group-btn">
                                    <button type="button"
                                            class="btn btn-info btn-flat"
                                            ng-click="addCategory(category)">新增</button>
                                </span>
                            </div>
                            <span ng-show="error.name" class="label label-danger" ng-bind="error.name"></span>
                        </div>
                    </div><!-- /.box-body -->
                </form>
                <div class="box-header">
                    <h3 class="box-title">物料分类</h3>
                </div><!-- /.box-header -->
                <div class="box-body table-responsive">
                    <table ng-table="tableParams"
                           show-filter="false"
                           class="table table-striped"
                           ng-form="skuCatListCtrl.tableForm"
                           admin-tracked-table="skuCatListCtrl.tableTracker">
                        <tr ng-repeat="category in $data "
                            ng-form="categoryForm"
                            admin-tracked-table-row="category">
                            <td data-title="'ID'" ng-bind="category.id" width="50"></td>
                            <td ng-switch="category.isEditing"
                                data-title="'分类名称'"
                                width="300"
                                ng-class="name.$dirty ? 'bg-warning' : ''"
                                ng-form="name" admin-tracked-table-cell>
                                <span ng-switch-default class="editable-text" ng-bind="category.name"></span>
                                <div class="controls" ng-class="name.$invalid && name.$dirty ? 'has-error' : ''" ng-switch-when="true">
                                    <input type="text" name="name" ng-model="category.name" class="editable-input form-control" required />
                                </div>
                            </td>
                            <td data-title="'物料数量'">
                                <span class="label label-info" ng-bind="category.product_count"></span>
                            </td>
                            <td data-title="'管理'">
                                <button class="btn btn-primary btn-sm"
                                        ng-click="saveCategory(category, categoryForm)"
                                        ng-if="category.isEditing"
                                        data-toggle="tooltip"
                                        title="完成"
                                        ng-disabled="categoryForm.$pristine || categoryForm.$invalid">
                                    <span class="glyphicon glyphicon-ok"></span>
                                </button>
                                <button class="btn btn-default btn-sm"
                                        ng-click="cancelEdit(category, categoryForm)"
                                        data-toggle="tooltip"
                                        title="取消"
                                        ng-if="category.isEditing">
                                    <span class="glyphicon glyphicon-remove"></span>
                                </button>
                                <button class="btn btn-default btn-sm"
                                        ng-click="category.isEditing = true"
                                        data-toggle="tooltip"
                                        title="编辑"
                                        ng-if="!category.isEditing">
                                    <span class="glyphicon glyphicon-pencil"></span>
                                </button>
                            </td>
                        </tr>
                    </table>
                </div><!-- /.box-body -->
                <div class="overlay" ng-show="tableParams.settings().$loading">
                    <i class="fa fa-refresh fa-spin"></i>
                </div>
            </div>
        </div>
    </div>
</div>
